<template>
    <div class="person-selector">
        <el-row :gutter="8" style="width: 100%">
            <el-col :span="6" :xs="24">
                <OrgTree ref="orgTreeRef" @node-click="nodeClick" />
            </el-col>
            <el-col :span="10" :xs="24">                
                <div class="person-selector-result" style="flex: 1;">
                    <el-row>
                        <el-col :span="12" :xs="24">
                            <el-input v-model="state.queryParams.name" size="default" :placeholder="$t('message.sysUser.name')" > </el-input>
                        </el-col>                        
                        <el-col :span="12" :xs="24" class="mb20 search-actions" align="center" >
                            
                        </el-col>
                    </el-row>
                    <div>
                        <el-button size="default" type="primary" class="ml10" @click="queryUser">
					<el-icon>
						<ele-Search />
					</el-icon>
					{{ $t('message.userOperation.query') }}
				</el-button>
				<el-button size="default" class="ml10" @click="reset">
					<el-icon>
						<ele-Refresh />
					</el-icon>
					{{$t('message.userOperation.reset') }}
				</el-button>
                <el-button size="default" type="success" class="ml10" @click="choiceAllUser">
					<el-icon>
						<ele-CirclePlus />
					</el-icon>
					{{$t('message.userOperation.choiceAll') }}
				</el-button>
                    </div>
                    <el-table :data="state.userData" style="width: 100%" v-loading="state.loading" border>
                        <el-table-column prop="name" :label="$t('message.sysUser.name')" show-overflow-tooltip />
                        <el-table-column prop="account" :label="$t('message.sysUser.account')" show-overflow-tooltip />
                        <el-table-column :label="$t('message.userOperation.oper')" align="center" fixed="right"
                            show-overflow-tooltip>
                            <template #default="scope">
                                <el-button icon="ele-Plus" size="small" text type="primary" @click="choiceUser(scope.row)">
                                    {{ $t('message.userOperation.add') }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col :span="8" :xs="24">
                <div class="person-selector-selected" style="flex: 1;">
                    <div>
                        <span style="font-size: 15px;">{{ $t('message.userAlter.selected') }}</span>
                        <el-button icon="ele-Delete" size="default" text type="primary" @click="removeAll()">
                            {{ $t('message.userOperation.clear') }}
                        </el-button>
                    </div>
                    
                    <el-scrollbar style="max-height: 200px;">
                        <el-table :data="state.selectedList" style="width: 100%" v-loading="state.loading" border >
                            <el-table-column prop="name" :label="$t('message.sysUser.name')" show-overflow-tooltip />
                            <el-table-column prop="account" :label="$t('message.sysUser.account')" show-overflow-tooltip />
                            <el-table-column :label="$t('message.userOperation.oper')" align="center" fixed="right"
                            show-overflow-tooltip>
                            <template #default="scope">
                                <el-button icon="ele-Delete" size="small" text type="primary" @click="removeUser(scope.row)">
                                    {{ $t('message.userOperation.delete') }}
                                </el-button>
                            </template>
                        </el-table-column>
                        </el-table>
                        
                    </el-scrollbar>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
import { reactive, defineAsyncComponent, ref, onMounted } from 'vue';
import { ElInput, ElScrollbar } from 'element-plus';
import { SysUser, SysOrg } from "/@/api-services/models/system";
import userApi from '/@/api-services/apis/system/userApi';
const OrgTree = defineAsyncComponent(() => import('/@/views/system/org/component/orgTree.vue'));
const orgTreeRef = ref<InstanceType<typeof OrgTree>>();
const state = reactive({
    loading: false,
    isShowDialog: false,
    userData: [] as Array<SysUser>,
    orgTreeData: [] as Array<SysOrg>,
    queryParams: {
        orgId: -1,
        name: undefined,
        phone: undefined,
        gender: undefined,
        status: undefined
    },
    tableParams: {
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0 as any,
        totalCount: 0 as any
    },
    editUserTitle: "",
    selectedList: [] as any
});

onMounted(async () => {
    queryUser();
});


// 树组件点击
const nodeClick = async (node: any) => {
  state.queryParams.orgId = node.id;
  queryUser();
};

// 处理搜索 
const queryUser = async () => { // TODO: 查询接口调用 
    state.loading = true;    
    var res = await userApi.page({'orgId':state.queryParams.orgId,
        'gender':state.queryParams.gender,
        'name' : state.queryParams.name,
        'status': state.queryParams.status,  
        'pageIndex': state.tableParams.pageIndex,
        'pageSize': state.tableParams.pageSize}
        );
    state.userData = res.data.data?.items ?? [];
    state.tableParams.totalPage = res.data.data?.totalPages;
    state.tableParams.totalCount = res.data.data?.totalCount;
    state.loading = false;
}

const reset=()=>{
    state.queryParams.orgId=-1
    state.queryParams.name=undefined
}
const choiceUser = (row: any) => {
    let index= state.selectedList.findIndex((item:any)=>item.id==row.id)
    if(index<0)//没有才添加
        state.selectedList.push(row);
}
const choiceAllUser=()=>{
    if(state.selectedList.length==0){
        state.selectedList=state.userData;
        return;
    }
    state.userData.forEach((user:any)=>{
        if(state.selectedList.findIndex((item:any)=>item.id==user.id)){
            state.selectedList.push(user);
        }        
    })
    
}
const removeUser = (row: any) => {   
    const index = state.selectedList?.findIndex((it: any) => it.id === row.id);
    if (index > -1) {
        state.selectedList.splice(index, 1);
    }
}

const removeAll=()=>{
    state.selectedList=[];
}
const initSelectedUser=(data:[])=>{
    state.selectedList=data;
}
const getSelectedUser=()=>{
    return state.selectedList;
}

defineExpose({ getSelectedUser,initSelectedUser});
</script> 
<style>

.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 15px;
}
.el-table__body tr,
  .el-table__body td {
    padding: 0px;
    height: 20px;
  }
</style>
